import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text } from '@tarojs/components';
import { AtTabs, AtTabsPane,AtButton,AtAvatar } from 'taro-ui';
import Tab from '../../components/tabBar/Tab';
import './classify.scss'
class Classify extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      listdetail:[]
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  componentDidMount() {
    this.getListDetail();
  }
  getListDetail(){
    Taro.request({
      method:"POST",
      url: 'http://123.57.67.148:3000/mock/573/newproduct',
      data: {
        listdetail: 'listdetail',
        bar: 10
      },
      header: {
        'content-type': 'application/json'
      }
    })
      .then(res =>{
        this.setState({
          listdetail:res.data.newproduct
        })
        console.log(res.data)
      })
  }
  render () {
    return (
      <View className='container'>
        <AtTabs
  current={this.state.current}
  scroll
  tabList={[
    { title: '全部' },
    { title: '水果生鲜' },
    { title: '粮食粮油' },
    { title: '特卖促销' },
    { title: '进口水果' }
  ]}
  onClick={this.handleClick.bind(this)}>
    <AtTabsPane current={this.state.current} index={0}>
    <View style='font-size:18px'><View className='at-row at-row--wrap middledetail'>
{this.state.listdetail.map((item, index) => {
          console.log(item)
              return (
                  <View className=' middet' key={index}>
                    <View className='middetimg'>
                      <Image className='middetimgs' style='width:375px;height:200px' src={item.imgurl}/>
                      <View className='middettext'>
                        <Text>
                          已团400件
                        </Text>
                      </View>
                    </View>
                    <View className='iontDe'>
                      <Text>{item.name}</Text>
                    </View>
                     <View className='at-row mid'>
                         <View className='midtuan'>2-4人团</View>
                         <View className=''>
                         <Text className='iontPrice'>￥{item.price}</Text>
                         </View>
                         <View className=''>
                         <AtAvatar image='https://jdc.jd.com/img/200' circle></AtAvatar>
                         </View>
                         <View className=' detbtn1'>
                         <AtButton type='primary' className='detbtn'>去开团</AtButton>
                         </View>
                     </View>
                  </View>
              )
            })}
</View></View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={1}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={2}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={3}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页四的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={4}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页五的内容</View>
  </AtTabsPane>
  
</AtTabs>
      <Tab current={2}></Tab>
      </View>
      
    )
  }
}
export default Classify